<!--
author:        1325572698@qq.com <zhudantong>
date:          2022-07-20 14:10:45
component:     index
Copyright © YourCompanyName All rights reserved
-->
<template>
  <div style="padding: 24px 0">
    <router-link style="margin-left: 24px" :to="{ path: '/homeVist/index' }"
      ><a-button>家访记录</a-button></router-link
    >
    <router-link :to="{ path: '/homeVist/task' }"
      ><a-button>家访任务</a-button></router-link
    >
    <router-link :to="{ path: '/homeVist/statistics' }"
      ><a-button>家访统计</a-button></router-link
    >

    <div class="attendance-tit">值班表</div>
    <div class="line"></div>
    <div class="body">
      <div class="day-statistics">
        <div class="day-form">
          <div class="day-form-one">
            <div class="day-form-tit">学年：</div>
            <a-select
              v-model="searchData.schoolYear"
              class="day-form-in"
              placeholder="请选择"
            >
              <a-select-option
                v-for="(item, index) in schoolYearArr"
                :key="index"
                :value="item.id"
              >
                {{ item.groupName || "" }}
              </a-select-option>
            </a-select>
          </div>
          <div class="day-form-one">
            <div class="day-form-tit">学期：</div>
            <a-select
              v-model="searchData.schoolYear"
              class="day-form-in"
              placeholder="请选择"
            >
              <a-select-option
                v-for="(item, index) in schoolYearArr"
                :key="index"
                :value="item.id"
              >
                {{ item.groupName || "" }}
              </a-select-option>
            </a-select>
          </div>
          <div class="day-form-one">
            <div class="day-form-tit">选择值班表：</div>
            <a-select
              v-model="searchData.schoolYear"
              class="day-form-in"
              placeholder="请选择"
            >
              <a-select-option
                v-for="(item, index) in schoolYearArr"
                :key="index"
                :value="item.id"
              >
                {{ item.groupName || "" }}
              </a-select-option>
            </a-select>
          </div>
          <a-button class="day-form-btn" type="primary" @click="getList()"
            >搜索</a-button
          >
          <a-button class="day-form-btn" @click="reset">重置</a-button>
          <a-button class="day-form-btn">导出值班表</a-button>
          <a-button type="primary" class="day-form-btn">创建值班表</a-button>
        </div>
      </div>
      <div v-if="list && list.length > 0">
        <div class="label-box">
          <div class="item">
            <div class="label-title">值班日期范围：</div>
            <div class="label-content">2020.09.08~2020.12.01</div>
          </div>
          <div class="item">
            <div class="label-title">值班模式：</div>
            <div class="label-content">
              {{ dutyMode == "week" ? "双周循环" : "无循环" }}
            </div>
          </div>
          <div class="item">
            <div class="label-title">部门：</div>
            <div class="label-content">教务处</div>
          </div>
          <div class="item" v-if="dutyMode == 'week'">
            <div class="label-title">值班负责人：</div>
            <div class="label-content">zhao 韩寒</div>
          </div>
          <div class="item">
            <div class="label-title">值班打卡：</div>
            <div class="label-content green">已开启</div>
          </div>
        </div>
      </div>
      <div class="operationBox">
        <div class="tableBtn" v-if="dutyMode == 'week'">
          <div class="item">
            <a-button>
              <template><a-icon type="left" /></template>
              展示单周
            </a-button>
          </div>
          <div class="item">
            <a-button>
              <template><a-icon type="right" /></template>
              展示双周
            </a-button>
          </div>
        </div>
        <div class="tableBtn" v-else>
          <div class="item">
            <a-select
              ref="select"
              v-model="mode"
              style="width: 120px"
              @change="modeChange"
            >
              <a-select-option value="week">7天/页</a-select-option>
              <a-select-option value="halfMonth">14天/页</a-select-option>
              <a-select-option value="month">按月/页</a-select-option>
              <a-select-option value="all">全部/页</a-select-option>
            </a-select>
          </div>
          <div class="item">
            <a-button>
              <template><a-icon type="left" /></template>
              上一页
            </a-button>
          </div>
          <p class="dateText">{{ dateText }}</p>
          <div class="item">
            <a-button>
              <template><a-icon type="right" /></template>
              下一页
            </a-button>
          </div>
        </div>
        <div class="operationBtn">
          <div><a-icon type="check-circle" />发布</div>
          <div><a-icon type="edit" />修改</div>
          <div><a-icon type="delete" />删除</div>
        </div>
      </div>
      <a-table
        :columns="columns"
        :data-source="list"
        :scroll="{ x: 1200 }"
        :rowKey="(record) => record.id"
        class="table"
        ref="table"
        :pagination="false"
        bordered
      >
      </a-table>
    </div>
  </div>
</template>
<script>
import moment from "moment";
import { mergeCellKey, renderContent } from "@/utils/mergeCell";
export default {
  data() {
    return {
      columns: [],
      list: [
        {
          groupName: "区域1",
          QXDM: "检查项1",
        },
        {
          groupName: "区域2",
          QXDM: "检查项1",
        },
        {
          groupName: "区域3",
          QXDM: "检查项2",
        },
      ],
      schoolYearArr: [],
      searchData: {
        schoolYear: undefined,
      },
      dutyMode: "",
      // dutyMode: "week",
      mode: "week",
      dateText: "",
    };
  },
  created() {
    // this.getList();
  },
  mounted() {
    this.dateText = `${this.getDay(-7)}~${this.getDay(0)}`;
    this.setSearchCondition("weeks");
  },
  methods: {
    modeChange(val) {
      if (val == "week") {
        this.dateText = `${this.getDay(-7)}~${this.getDay(0)}`;
        this.setSearchCondition("weeks");
      } else if (val == "halfMonth") {
        this.dateText = `${this.getDay(-14)}~${this.getDay(0)}`;
        this.setSearchCondition("halfMonth");
      } else if (val == "month") {
        this.dateText = `${this.getFirstDayOfMonth()}~${this.getDay(0)}`;
        this.setSearchCondition("months");
      } else {
        this.dateText = "全部";
      }
    },
    reset() {},
    getList() {
      list().then((response) => {
        this.list = response.data;
      });
    },
    // 设置表头
    enumerateDaysBetweenDates(startDate, endDate) {
      let daysList = [];
      const start = moment(startDate);
      const end = moment(endDate);
      const day = end.diff(start, "days");
      daysList.push(start.format("YYYY-MM-DD"));
      for (let i = 1; i <= day; i++) {
        daysList.push(start.add(1, "days").format("YYYY-MM-DD"));
      }
      return daysList;
    },
    // 设置搜索条件和表头
    setSearchCondition(type = "today") {
      this.type = type;

      if (type == "today") {
        this.tableWidth = "100%";
        this.searchData.queryStartDate = moment()
          .startOf("days")
          .format("YYYY-MM-DD");
        this.searchData.queryEndDate = moment()
          .endOf("days")
          .format("YYYY-MM-DD");
      }
      if (type == "weeks") {
        this.tableWidth = "100%";
        this.searchData.queryStartDate = moment()
          .startOf("weeks")
          .format("YYYY-MM-DD");
        this.searchData.queryEndDate = moment()
          .endOf("weeks")
          .format("YYYY-MM-DD");
      }
      if (type == "halfMonth") {
        this.tableWidth = "100%";
        this.searchData.queryStartDate = this.getDay(-14);
        this.searchData.queryEndDate = moment()
          .endOf("weeks")
          .format("YYYY-MM-DD");
      }
      if (type == "months") {
        this.tableWidth = "400%";
        this.searchData.queryStartDate = moment()
          .startOf("months")
          .format("YYYY-MM-DD");
        this.searchData.queryEndDate = moment()
          .endOf("months")
          .format("YYYY-MM-DD");
      }

      this.dynamicTableTit = this.enumerateDaysBetweenDates(
        this.searchData.queryStartDate,
        this.searchData.queryEndDate
      );
      console.log(this.dynamicTableTit);
      // 兼容后端星期字串
      console.log(
        "this.dynamicTableTitthis.dynamicTableTitthis.dynamicTableTit: ",
        this.dynamicTableTit
      );
      let columns = [
        {
          title: "区域",
          dataIndex: "groupName",
          width: 150,
        },
        {
          title: "检查项",
          // align: "center",
          dataIndex: "QXDM",
          width: 150,
          customRender: (value, row, index) => {
            const obj = {
              children: value,
              attrs: {},
            };
            obj.attrs.rowSpan = mergeCellKey(row.QXDM, this.list, "QXDM");
            return obj;
          },
        },
      ];
      this.dynamicTableTit.forEach((item) => {
        columns.push({
          title: item,
          dataIndex: item,
          key: item,
          width: 120,
        });
      });
      this.columns = columns;
      this.getList();
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = "0" + month;
      }
      return m;
    },

    getDay(day) {
      var today = new Date();
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds);
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tYear + "-" + tMonth + "-" + tDate;
    },
    getFirstDayOfMonth() {
      var date = new Date();
      date.setDate(1);
      return this.timeFormat(date);
    },
    timeFormat(date) {
      let day =
        date.getDate().toString().length == "1"
          ? (day = "0" + date.getDate())
          : date.getDate();
      let month =
        date.getMonth() + 1 < 10
          ? (month = "0" + (date.getMonth() + 1))
          : date.getMonth() + 1;
      let str = date.getFullYear() + "-" + month + "-" + day;
      return str;
    },
  },
};
</script>
<style scoped="scoped" lang="scss">
.operationBox {
  display: flex;
  justify-content: space-between;
  .tableBtn {
    display: flex;
    .item {
      margin: 0 5px;
    }
  }
  .operationBtn {
    display: flex;
    div {
      width: 88px;
    }
  }
  .dateText {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    margin: 0 10px;
  }
}
</style>
